<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
        <div class="m-t-xs m-t-sm">
          <span>{{'faultstatistics.head.LEFT_TITLE1'|translate}}</span>
          <i class="fa fa-angle-right"></i>
          <span>{{'faultstatistics.head.LEFT_TITLE2'|translate}} </span>
        </div>
      </div>
    </div>
  </div>

  <div class="wrapper-md">
    <div class="row">
      <!-- 故障占比统计 -->
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">{{'faultstatistics.content.piestat.TITLE'|translate}}
          </div>
          <div class="panel-body">
            <chart-fault></chart-fault>

          </div>
        </div>
      </div>

      <!-- 故障次数统计 -->
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">
            <span>{{'faultstatistics.content.barstat1.TITLE'|translate}}</span>
          <span class="text-sm text-muted pull-right">
           <app-date-selector (date)="ofaultDate=$event;"></app-date-selector>
          </span>
          </div>
          <div class="panel-body">
            <chart-ofault [date]="ofaultDate"></chart-ofault>
          </div>
        </div>
      </div>

      <!-- 预警次数统计 -->
      <div class="col-md-12">
        <div class="panel panel-default" >
          <div class="panel-heading font-bold" >
            <span>{{'faultstatistics.content.barstat2.TITLE'|translate}}</span>
            <app-date-selector (date)="yfaultDate=$event;"></app-date-selector>
          </div>
          <div class="panel-body">
            <chart-yfault [date]="yfaultDate"></chart-yfault>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>
